<template>
	<view class="transfer">
		<view class="lists">
			<view class="empty-msg" v-if="lists.length<=0">
				<view class="icon">
					<view class="iconfont icon-konghezi"></view>
				</view>
				<view class="info">空空如也</view>
			</view>
			<block v-for="(val,index) in lists" :key="index">
				<view class="item bg-box">
					<view class="left-content col">
						<view class="logo">
							<image mode="widthFix" src="../../../static/icon/usdt-logo-300.png"
								v-if="val.symbol == 'USDT'"></image>
							<image mode="widthFix" src="../../../static/icon/sidlogo.png" v-else></image>
						</view>
						<view class="content">
							<view class="ordersn">订单{{val.id}}</view>
							<view class="reason">
								<view class="order-status">{{val.status_str}}</view>
								<view class="order-reason">{{val.reason}}</view>
							</view>
							<view class="ctime">{{val.create_time}}</view>
						</view>
					</view>
					<view class="right-content col text-highlight">
						{{val.amount}} {{val.symbol}}
					</view>

				</view>
			</block>
			<uni-load-more :status="status" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	import api from "@/utils/api/wallet/index.js"
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				lists: [],
				page: 1,
				status: 'more',
				contentText: {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多'
				},
				symbol: "",
			}
		},
		onLoad(e) {
			if (typeof(e.symbol) != "undefined") {
				this.symbol = e.symbol;
				uni.setNavigationBarTitle({
					title: this.symbol.toUpperCase() + "记录"
				})
			} else {
				uni.setNavigationBarTitle({
					title: "账单明细"
				})
			}
			//this.symbol = "ETH"


			this.getTransferLog();
		},
		onPullDownRefresh() {
			this.refreshPage();
		},
		onReachBottom() {
			this.getTransferLog();
		},
		methods: {
			refreshPage() {
				this.page = 1;
				this.lists = [];
				this.status = 'more';
				this.getTransferLog();
				uni.stopPullDownRefresh();
			},
			async getTransferLog() {
				if (this.status != 'more') {
					return;
				}
				let post = {
					page: this.page,
					symbol: this.symbol
				}
				this.page++;
				this.status = 'loading';
				let res = await api.transferLog(post);
				if (res.status == 1) {
					if (res.data != null && res.data.length > 0) {
						this.lists = this.lists.concat(res.data);
						this.status = 'more';
					} else {
						this.status = 'nomore';
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

	.transfer {
		.lists {
			.item {
				flex-direction: row;
				justify-content: space-between;
				padding: 7.5px 15px;
				border-bottom: 1px solid #22192E;
				position: relative;

				.right-content {
					justify-content: center;
					min-width: 80px;
					text-align: right;
				}

				.left-content {
					flex-direction: row;

					.logo {
						width: 30px;
						justify-content: center;

						image {
							width: 100%;
							-webkit-filter: grayscale(1);
							filter: gray;
							filter: grayscale(1);
							opacity: .3;
						}
					}

					.content {
						padding-left: 15px;
						.ordersn{font-size: 12px;opacity: .5; font-weight: bold;}

						.reason {
							font-weight: bold;
							color: #FFFFFF;
							line-height: 110%;
							height: 50px;
							justify-content: center;
							.order-status{
								font-size: 10px;
								background-color: #222222;
								color: #fff;
								padding:0 5px;
								border-radius: 6px;
								position: absolute;
								right:15px;
								top:15px;
							}
						}

						.ctime {
							font-size: 12px;
							opacity: .5;
						}
					}
				}
			}
		}
	}
</style>
